import React from "react"
import "./todo.css"
import { nanoid } from 'nanoid';
import Todoheader from "./../Todoheader/Todoheader"
import Todomain from "./../Todomain/Todomain"
import Todofooter from "./../Todofooter/Todofooter"

export default class Todo extends React.Component {
    state = {
        todos: [

        ]
    }
    render() {
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Todoheader addTodo={this.addTodo} />
                    <Todomain todos={this.state.todos} checkTodo={this.checkTodo} removeTodo={this.removeTodo} />
                    <Todofooter checkAllTodos={this.checkAllTodos} todos={this.state.todos} removeAllTodos={this.removeAllTodos} />
                </div>
            </div>
        )
    }
    addTodo = (title) => {
        let { todos } = this.state
        let todoobj = {
            id: nanoid(),
            title: title,
            done: false
        }
        let newarr = [...todos, todoobj];
        this.setState({
            todos: newarr
        })
    }
    checkTodo = (id, status) => {
        let newarr = this.state.todos.map(item => {
            if (item.id === id) {
                item.done = status;
            }
            return item
        })
        this.setState({
            todos: newarr,
        })
    }
    removeTodo = (id) => {
        let newarr = this.state.todos.filter(item => { return item.id !== id }
        )
        this.setState({ todos: newarr })
    }
    checkAllTodos = (status) => {
        let newarr = this.state.todos.filter(item => {
            item.done = status;
            return item
        })
        this.setState({ todos: newarr })
    }
    removeAllTodos = () => {
        let newarr = this.state.todos.filter(item => !item.done
        )
        this.setState({ todos: newarr })
    }
}